#app {
    .app-todos {
        width: 600px;
        border: 1px solid #ddd;
        margin: 0 auto;
        min-height: 200px;

        .app-todos-header{
            text-align: center;
            h1{
                font-weight: 100;
                color: #f2dfd8;
                font-size: 30px;
            }
        }

        .app-todos-contnet {
            .my-todos-header {
                display: flex;
                height: 30px;
                .todos-header-left {
                    text-align: center;
                    flex: 1;
                    span {
                        display: inline-block;
                        transform: rotate(90deg);
                        padding-bottom: 15px;
                        padding-right: 10px;
                    }
                }
                .checkClass {
                    color: red;
                  }
                .todos-header-right {
                    padding: 0 20px;
                    flex: 8;
                    input {
                        width: 100%;
                        height: 30px;
                        outline: none;
                    }
                }
            }
            .my-todos-list {
                .todos-list-item:hover {
                    .list-item-right {
                        display: block;
                    }
                  }
                .todos-list-item {
                    display: flex;
                    height: 40px;
                    align-items: center;
                    .list-item-left {
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        input {
                        }
                    }
                    .list-item-mid {
                        flex: 8;
                        display: flex;
                        justify-content: center;
                        .hidden{
                            display: none;
                        }
                        .hidden_input{
                            display: none;
                        }
                        .title {
                        }
                        .completed{
                            color:#dddddd;
                            text-decoration: line-through;
                        }
                    }
                    .list-item-right {
                        display: flex;
                        justify-content: center;
                        flex: 1;
                        display: none;
                        .delete {
                        }
                    }
                }
            }
        }
        .my-todos-bottom {
            display: flex;
            justify-content: space-between;
            .todos-bottom-left {
          
            }
          
            .todos-bottom-mid {
                .bottom-mid-item {
          
                }
                .active{
                    color:red;
                }
            }
          
            .todos-bottom-right {
          
            }
        }
    } 
}



